<template>
  <section>
    <van-nav-bar title="上传文件" left-arrow @click-left="goBack" />
    <div style="margin-top: 10px">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="selectedModel.title"
            name="title"
            label="标题"
            placeholder="标题"
            :rules="[{ required: true, message: '请填写标题' }]"
          />
          <van-field name="content" label="内容">
            <template #input>
              <upload v-model="selectedModel.content" />
            </template>
          </van-field>
          <van-field name="img" label="封面">
            <template #input>
              <upload v-model="selectedModel.img" />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </section>
</template>

<script setup>
import { ref ,onMounted} from "vue";
import * as api from "@/api/article.js";
import upload from "../components/upload";
import { useRouter } from 'vue-router'
const router = useRouter()
const user = ref(null);
onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
});
const selectedModel = ref({
  title: "",
  content: "",
  img: "",
  status: "pending",
});


const onSubmit = async (values) => {
  console.log("submit", values);
  //   const { userInfo } = store.state;
  const res = await api.create({
    ...selectedModel.value,
    username: user.value.username,
    user_id: user.value.id,
  });
  showNotify({
    type: res.success ? "success" : "danger",
    message: res.success ? "上传成功" : res.message,
  });
  if (res.success) {
  }
};

const goBack = () => {
  router.back();
};
</script>
